<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../base.jsp" %>
<style>
	.content-wrapper{margin-left: 0px}
</style>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>系统配置<small>菜单管理</small></h1>
				<ol class="breadcrumb">
					<li><a href="javascript:;"><i class="fa fa-dashboard"></i> 首页</a></li>
					<li class="active">菜单管理</li>
				</ol>
			</section>
			<!-- Main content -->
			<section class="content">
				<div class="row">
        			<div class="col-md-3">
        				<div class="box box-solid">
				          <div class="box-header with-border">
				            <h3 class="box-title">菜单设置</h3>
				            <div class="box-tools">
					        	<a class="btn btn-default btn-sm addMenu"><i class="fa fa-plus"></i>添加菜单</a>
				            </div>
				          </div>
				          <div class="box-body no-padding">
				            <ul id="treeDemo" class="ztree"></ul>
				            <ul id="serviceList" class="nav nav-pills nav-stacked">
				            </ul>
				          </div>
				          <!-- /.box-body -->
				        </div>
        			</div>
        			<div class="col-md-9" id="menuInfo">
        			</div>
        		</div>
			</section>
		</div>
	</div>
	
	<script type="text/javascript" src="${url }js/ztree/ztree.js"></script>
	<link rel="stylesheet" media="screen" href="${url }js/ztree/zTreeStyle/zTreeStyle.css"/>
	<script type="text/javascript">
	//zTree 的数据属性
	var zNodes = ${treeJson};
	$(function () {
		/******************ztree*******************/
		var zTreeObj;
		// zTree 的参数配置
		var setting = {
			data: {
				simpleData: {
					enable:true
				}
			},
			callback: {
				beforeClick: function(treeId, treeNode) {
					linkByDom('menuInfo',path+'permission/menu/mergepage?id='+treeNode.id)
					
					var mainheight = $("body").height();
					
					//var mainheight = $("#menuInfo").height();
					$('#iframepage', parent.document).height(mainheight);
				}
			}
		};
		zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
		zTreeObj.expandAll(true);
	});
	
	$('.addMenu').on('click',function(){
		linkByDom('menuInfo',path+'permission/menu/mergepage')
		var mainheight = $("#menuInfo").height();
		$('#iframepage').height(mainheight);
	});
	</script>
</body>